<template>
  <div class="register-page">
    <top-bar-son title="注册" @click-left="routerBack()"></top-bar-son>
    <div class="space"></div>
    <!--      注册表单-->
    <div class="formContainner">
      <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="rePassword"
            type="password"
            name="rePassword"
            label="确认密码"
            placeholder="请确保两次输入密码相同"
            :rules="[{ validator, message: '请确保两次输入的内容一致' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import TopBarSon from "@/components/TopBarSon";

export default {
  name: "Register",
  components: {TopBarSon},
  data() {
    return {
      title: '注册',
      username: '',
      password:'',
      rePassword:''
    }
  },
  methods: {
    validator(val){
      console.log("验证器输出内容:"+val)
      var boolReturn = false;
      if (val === this.password && val.length !== 0){
        boolReturn = true;
      }
      return boolReturn;
    },
    routerBack(){
      this.router.push('./setting');
    },
    onSubmit(values) {
      console.log('submit', values);
      //获取单个值
      // console.log(values.username)
    },
  },
}
</script>

<style scoped>
.formContainner {
  height: 80px;
  padding-top: 20px;
}

.space {
  height: 50px;
}
</style>